<template>
    <div :class='$style.container'>
        <v-chart style="width:100%;height:100%" :option='option' />
    </div>
</template>

<script lang='ts' setup>
    import { computed } from "vue";

    const { params, fields } = defineProps<{
        params : any,
        fields : string[]
    }>()


    const option = computed(() => {
        let option = {
            tooltip: {
                trigger: 'axis'
            },
            grid : {
                //top : '20px',
                //right : '30px',
                bottom : '30px',
                //left : '30px'
            },
            legend: {
                type: 'scroll',
                top: 10,
            },
            dataZoom: [
                {
                    type: 'inside'
                }
            ],
            xAxis: {
                type: 'category',
                data: params.name
            },
            yAxis: {
                type: 'value'
            },
            series: []
        };

        params.fields.forEach((field, index) => {
            const serie = {
                name: field,
                type: 'bar',
                barGap: 0,
                data : []
            }

            params.data.forEach(row => {
                serie.data.push(row[index] == null ? 0 : row[index])
            })

            option.series.push(serie)
        })

        console.log(option)

        return option
    })
</script>


<style scoped module lang='scss'>
    .container{
        height: 500px;
    }
</style>